<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>1.生命周期</title>
        <!-- 引入Vue -->
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1>{{num}}</h1>
            <button id="btn" @click="add">点击++++1111</button>
            <button @click="del">销毁组件</button>
        </div>
    </body>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add(){
                    console.log("我 add 被执行了");
                    this.num++;
                },
                del(){
                    // console.log(this);
                    this.$destroy();
                }
            },
            beforeCreate(){
                // console.log("【beforeCreate创建前】：此时，无法在 vm 上访问 data数据和methods方法，此时数据代理还未开始。",this)
                // console.log(this.num);
                // debugger;
            },
            created(){
                // console.log("【created创建后】：此时，数据代理和数据劫持完成，可以在vm上访问data数据和mthods方法。",this)
                // console.log(this.num);
                // debugger;
            },
            beforeMount(){
                // console.log("【beforeMount挂载前】，此时页面呈现的是未经编译的dom结构，在此时对dom的操作，最终都不生效。将虚拟dom 存在vm上,方便后期diff比较",this)
                // console.log(this.$el);
                // document.getElementById('btn').innerHTML = "测试一下你到底有没有用";
                // debugger;
            },
            mounted(){
                // console.log("【mounted挂载后】，此时页面呈现的是经编译的dom结构[将虚拟dom替换掉真实dom]，做初始化的工作： 创建定时器，发送ajax请求，发布订阅，创建自定义事件",this)
                // debugger;
            },
            beforeUpdate(){
                // console.log("【beforeUpdate 更新前】 数据被更新了，但是视图未被更新.",this)
                // console.log(this.num);
                // debugger;
            },
            updated(){
                // console.log("【updated更新后】 数据被更新了，视图也被更新.此时，数据和视图保持同步",this)
                // console.log(this.num);
                // debugger;
            },
            beforeDestroy(){
                console.log("【beforeDestroy 销毁前】，此时，data、methods、指令都处于可用状态，但是： methods 方法对数据的操作，都不会呈现到视图中。做收尾的工作。销毁定时器，解绑自定义事件");
                // console.log(this.num);
                // this.add();
                // console.log(this.num);
                // debugger;
            },
            destroyed(){
                console.log("destroyed  销毁完成");
                console.log(this.num);
                debugger
            }
            

        })

        // console.log(vm);
        // vm.$mount("#app");
    </script>
</html>